<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			ul{
				list-style: none;
			}
			body{
				background-color:#f4f4f4 ;
			}
			.slide{
				position: fixed;
				right: 0;
				top:200px;
				z-index: 100;
				width: 37px;
				height: 190px;
			}
			.slide ul li {
				width: 37px;
				height: 37px;
				float: left;
				position: relative;	
				border-bottom: 1px solid #f4f4f4;
				/* display: flex; */
				/* justify-content: center; */
			}
			.slide ul li .slide-box{
				position: absolute;
				top: 0;
				right: 0;
				width: 37px;
				height: 37px;
				color: #FFF;
				background-color: white;
				opacity: .8;
				font-size: 12px;
				font-weight: 600;
				display: flex;
				align-items: center;
				/* justify-content: space-around; */
				overflow: hidden;
			}
			.slide ul li .slide-box span{
				
			}
			.slide ul li .slide-top{
				width: 37px;
				height: 37px;
				line-height: 37px;
				display: inline-block;
				background-color: #FFFFFF;
				opacity: 0.8;
				transition: all 0.3s;
			}
			.slide ul li .slide-top:hover{
				opacity: 1;
				background: #c81623;
			}
			.slide ul li img{
				/* float: left; */
				width: 37px;
				height: 37px;
				
			}
		</style>
		<script src="jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body style="height: 2000px;">
		<div class="slide">
			<ul>
				<li>
					<a href="javascript:;">
						<div class="slide-box">
							<img src="img/Wechat_300px_1230528_easyicon.net.png"><span>微信</span>
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<div class="slide-box">
							<!-- <img src="img/Weibo_32px_1230529_easyicon.net.png" >微博 -->
							<img src="img/Weibo_300px_1230529_easyicon.net.png" >微博
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<div class="slide-box">
							<img src="img/Android_293px_1230418_easyicon.net.png" >客服
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;">
						<div class="slide-box">
							<img src="img/Apple_293px_1230419_easyicon.net.png" >客服
						</div>
					</a>
				</li>
				<li>
					<a href="javascript:;" class="slide-top">
							<!-- <img src="img/circle_chevron_top_162px_1223176_easyicon.net.png" > -->
							<img src="img/up_26.905027932961px_1137730_easyicon.net.png" >
					</a>
				</li>
			</ul>
		</div>
	</body>
	<script type="text/javascript">
		$(function(){
			$('.slide ul li').hover(function(){
				$(this).find('.slide-box').stop().animate({
					'width':'74px'
				},300).css({
					'opacity':'1',
					'background':'#c81623'
				})
			},function(){
				$(this).find('.slide-box').stop().animate({
					'width':'37px'
				},300).css({
					'opacity':'0.8',
					'background':'#fff'
				})	
			})
			$('.slide-top').click(function(){
				$('html,body').animate({'scrollTop':0},500)
			})
		})
	</script>
</html>
